.style-preview__header {
	display: grid;
	grid-template-areas: 'title viewport-select actions';
	column-gap: 1em;
}

.style-preview__content {
	display: grid;
	grid-template-areas: 'fonts preview';
	grid-template-columns: 200px auto;
	column-gap: 80px;
}
.style-preview__titles {
	grid-area: title;
}
.style-preview__viewport-select {
	grid-area: viewport-select;
}
.style-preview__actions {
	grid-area: actions;
}
.style-preview__font-options {
	grid-area: fonts;
	display: grid;
	grid-template-columns: 100%;
	row-gap: 1em;
}

// Extra specificity to override core component border
.style-preview__font-option.components-button {
	border: 1px solid var( --studio-gray-10 );
	justify-content: center;
	height: 3.2em;

	&.is-selected {
		border-color: var( --highlightColor );
		color: var( --highlightColor );
	}
}

.style-preview__preview {
	grid-area: preview;

	border: 1px solid var( --studio-gray-5 );
	box-shadow: 0 4px 14px rgba( 0, 0, 0, 0.25 );
	border-radius: 4px;
	overflow: hidden;
}
.style-preview__preview-bar {
	width: 100%;
	height: 30px;

	background: #fff;
	border-bottom: 1px solid var( --studio-gray-5 );
	display: flex;
	flex-direction: row;
	align-items: center;
	padding: 10px;
}
.style-preview__preview-bar-dot {
	background: var( --studio-gray-5 );
	width: 6px;
	height: 6px;
	border-radius: 50%;
	margin: 0 2px;
}

.style-preview__viewport-select {
	display: flex;
	justify-content: center;

	.components-button {
		height: auto;

		svg {
			fill: none;
		}

		color: var( --studio-gray-10 );
		&.is-selected {
			color: #000;
		}
	}
}
